<style>
.fui-pictext-group.block .fui-pictext-item {
    width: 50%;
    float: left;
    border-bottom: 0;
    background: none;
    padding: 0.25rem;
    display: block;
}
.fui-pictext-group.block .fui-pictext-item {
    width: 50%;
    float: left;
    border-bottom: 0;
    background: none;
    padding: 0.25rem;
    display: block;
}

.fui-pictext-group.three .fui-pictext-item {
    width: 33.33%;
}

.fui-pictext-group.block .fui-pictext-item .image {
    width: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding-bottom: 100%; /* 关键就在这里 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.fui-pictext-group.block .fui-pictext-item .image.auto {
    height: auto;
    padding-bottom: 0;
}

.fui-pictext-group .fui-pictext-item .salez {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-repeat: no-repeat;
    background-position: bottom right;
}
/* 图文组*/
.fui-pictext-group {
    height: auto;
    overflow: hidden;
    background: #f9f9f9;
}

.fui-pictext-item {
    position: relative;
    height: auto;
    padding: 0.5rem;
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.fui-pictext-item .image {
    height: 4rem;
    width: 30%;
    float:right;
}

.fui-pictext-item .image img {
    height: 100%;
    width: 100%;
    display: block;
}

.fui-pictext-item .detail {
	width:70%;
	text-align:left;
	float:left;
    background: #fff;
}
.fui-pictext-item .detail span{
    margin-right:0.2rem
}
.fui-pictext-item .detail .name {
    height: 3rem;
    font-size: 0.85rem;
    color: #262626;
}

.fui-pictext-item .detail .info {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.7rem;
    margin-top: .3rem;

}

.fui-pictext-item .detail .info .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #ed2822;
}

.fui-pictext-item .detail .info .username {
    font-size: 0.55rem;
}

.fui-pictext-item .detail .info .cmt-num {
    color: #777;
    font-size: 0.55rem;
}
.fui-pictext-item .detail .info .render-time {
    color: #777;
    font-size: 0.55rem;
}

.fui-pictext-item .detail .info .newstag {
    display: block;
    text-align: center;
    line-height: 0.45rem;
    color: #f60;
    font-size: 0.55rem;
	border: 1px solid;
    border-radius: 0.5rem;
    display: block;
    font-size: 0.45rem;
    padding: 0.1rem;

}
/* 重写样式 */
.fui-header.block {
    display: block;
}

.fui-tab {
    margin: 0;
}

.fui-tab a {
    height: 2.2rem;
    line-height: 2.2rem;
}

.fui-tab:after {
    display: none;
}


/* 直播首页 */
.live-category-list .fui-list-inner{height:5.5rem;}
.live-category-list-inner{height:5.5rem; display: flex;overflow-x: scroll;overflow-y: hidden;text-align: center;}
.live-category-list-inner a{width:5.5rem;height:5.5rem;display: block;float:left;margin-right:0.2rem;}
.live-category-list-inner a p{height:4.5rem;display: block;-webkit-border-radius: 0.5rem;border-radius: 0.5rem;margin:0 auto;overflow: hidden;}
.live-category-list-inner a p img{width:100%;height:100%;}
.live-category-list-inner a span{font-size:0.7rem;color:#000;}

.live-list{margin-top:0.5rem;position: relative;}
.live-list .fui-list{padding:0 0.5rem 0 0;background: #fff;height:6rem;border-bottom:0.3rem solid #ededed;}
.live-list .fui-list .fui-list-media{width:6rem;height:6rem;}
.live-list .fui-list .fui-list-inner h3{font-size:0.8rem;color:#000;height:2.0rem;line-height: 1.2rem;overflow: hidden;margin-top:10px}
.live-list .fui-list .fui-list-inner p{font-size:0.6rem;color:#118cff;height:1.2rem;line-height: 1.2rem;display: block;margin:0;padding:0}
.live-list-subscribe{font-size:0.6rem;color:#666;line-height: 1.2rem;}
.live-subscribe-a{height:1.2rem;width:3rem;display: inline-block;border:1px solid #118cff;line-height: 1.1rem;text-align: center;-webkit-border-radius: 0.2rem;border-radius: 0.2rem;float:right;}
.live-subscribe-a.live-subscribe-default-a{color:#118cff;}
.live-subscribe-a.live-subscribe-default-a.disabled{color:#f95959;border:1px solid #f95959;}
.live-subscribe-a.live-subscribe-full-a{color:#fff;background: #118cff;}
.live-list .fui-list-media a{width:6rem;height:6rem;position: relative;}
.live-list .fui-list-media img{width:100%;height:100%;}
.live-living{height:1rem;display: inline-block;border:1px solid #ededed;-webkit-border-radius: 1rem;border-radius: 1rem;background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;color:#fff;line-height: 0.9rem;font-size:0.6rem;position: absolute;opacity:0.8;padding:0 0.5rem;right:0.15rem;top:0.3rem;z-index: 10;}
.live-living i{width:5px;height:5px;display: inline-block;background: #00ff00;-webkit-border-radius: 5px;border-radius: 5px;float:left;margin:0.3rem 0.2rem 0 0;}

.live-hot-list{padding:0 0.1rem;background: #ededed;}
.live-hot-list-room{width:50%;float:left;padding:0.1rem;}
.live-hot-list-inner{background: #fff;padding:0 0 0.5rem 0;}
.live-hot-list-img{display: block;text-align: center;overflow: hidden;position: relative;}
.live-hot-list-img img{width:9rem;height:9rem;}
.live-hot-list-room h3{font-size:0.8rem;color:#000;height:2.0rem;line-height: 1rem;overflow: hidden;padding:0.2rem 0.3rem;margin-top:10px}
.live-hot-list-room p{font-size:0.6rem;color:#118cff;height:1.2rem;line-height: 1.2rem;display: block;padding:0 0.3rem;margin:0}

.live-category{height:2rem;background: #fff;line-height: 1.9rem;position: relative;}
.live-category-content{height:2rem;display:flex;overflow-x: scroll;overflow-y:hidden;}
.live-category:before{position: absolute;content: "";border-top:1px solid #ededed;left:0;top:0;bottom:0;right:0;}
.live-category a{padding:0 0.5rem;font-size:0.7rem;color:#000;position: relative;height:2rem;display: inline-table;line-height: 2rem;}
.live-category a.active:before{position: absolute;content: "";border-bottom: 2px solid #118cff;left:0;bottom:0;right:0;top:0;}


/*.live-banner {
    height: 10.5rem;
    background: #eee;

    !*以下为测试样式*!
    line-height: 10.5rem;
    text-align: center;
    color: #333;
    display: block;
}

.live-search {
    height: 2.2rem;
    background: #ccc;

    !*以下为测试样式*!
    line-height: 2.2rem;
    text-align: center;
}

.live-list {
    height: auto;
    padding: 0.25rem;
    overflow: hidden;
}

.live-list .live-room {
    height: auto;
    width: 50%;
    padding: 0.25rem;
    float: left;
    overflow: hidden;
}

.live-list .live-room .thumb {
    height: 8rem;
    background: #eee;

    !*以下为测试样式*!
    line-height: 8rem;
    text-align: center;
    color: #333;
}*/

.live-more {
    line-height: 3rem;
    text-align: center;
}

/* 直播间 */
.live-video {
    height: 10.5rem;
    background: #000;
}

.live-tab {}

.live-content {
    padding: 0.5rem;
}

.live-msg {
    padding-bottom: 0.2rem;
    color: #666;
    font-size: 14px;
}

.live-msg .name {
    color: #00bbee;
}

.live-msg img {
    max-width: 200px;
}

.live-footer {
    padding: 0.25rem 0.5rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.live-footer .live-emoji {
    width: 2rem;
    background: red;
    margin-right: 0.5rem;
}

.live-footer .live-input {
    padding-right: 0.5rem;

    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.live-footer .live-input .input {
    height: 2rem;
    width: 100%;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 16px;
    color: #666;
    word-break: break-all;
    outline: none;
    overflow-y: auto;
}

.live-footer .live-input .input:focus {
    border: 1px solid #00bbee;
}

/*

.live-footer .live-input .input img {
    vertical-align: text-top;
    height: 20px;
}

.live-footer .live-input .input:empty :before {
    content: attr(placeholder);
    line-height: 1.5rem;
    color:#bbb;
}

.live-footer .live-input .input input[type='button'] {
    background: none;
    border: 0;
    padding: 0;
    color: #50b6fe;
    font-size: 0.65rem;
}
*/


.live-footer .live-send {
    width: 3.5rem;
    background: #ccc;
    color: #fff;
    line-height: 2rem;
    height: 2rem;
    text-align: center;
    border-radius: 3px;
    display: block;
}

.live-footer .live-send.active {
    background: #00bbee;
}


.live-footer-emoji {
    height: 4.5rem;
}

.nickname {
    color: #50b6fe;
}
    .shop-index-page .menu {height: auto; background: #fff;}
    .shop-index-page .menu .item {height: auto; width: 1%; padding: 0.5rem 0; margin: 0; font-size: 0.65rem; color: #636363; text-align: center; display: table-cell;position: relative;}
    .shop-index-page .menu .item:after  {font-size: 0.65rem;position: absolute;content: '';left:0;top:0.5rem;bottom:0.5rem;border-left:1px solid #d9d9d9;}
    .content-empty{padding:1rem 0;margin:0;}
</style>
<div class='fui-page  fui-page-current article-list-page'>
	<div class="fui-header">
		<div class="title">发现</div>
		<div class="fui-header-right"></div>
	</div>
	<div class='fui-content' style="margin-bottom:2.5rem">
			<div class="fui-article-list template-2">
				<div class="fui-tab-scroll">
					<div class='xcontainer'>
						<span class="item"><a ng-class="{'active':pagedata.action == 'default'}" href="javascript:" ng-click="getlist('default');pagedata.action='default'">精选</a></span>
						<span ng-class="{'item':1,'active':pagedata.action == 'cms360'}"><a href="javascript:" ng-click="getlist('cms360');pagedata.action='cms360'">全景</a></span>
						<span ng-class="{'item':1,'active':pagedata.action == 'photo'}"><a href="javascript:" ng-click="getlist('photo');pagedata.action='photo'">美图</a></span>
						<span ng-class="{'item':1,'active':pagedata.action == 'video'}"><a href="javascript:" ng-click="getlist('video');pagedata.action='video'">视频</a></span>
						<span ng-class="{'item':1,'active':pagedata.action == 'live'}"><a href="javascript:" ng-click="getlist('live');pagedata.action='live'">直播</a></span>
					</div>
				</div>
				<div class="fui-pictext-group" ng-if="pagedata.action == 'default' ">
					<a class="fui-pictext-item" data-nocache="true" style="position: relative;" ng-repeat="item in pagedata.list" ng-click="access_json('jy_cmsarticle/news/detail/id='+item.id)">
						<div class="detail">
							<div class="name">{{item.title}}</div>
							<div class="info">
								<span class="newstag">热门</span><span class="cmt-num">{{item.comments || 0}}评论</span><span class="render-time">{{item.createtime}}</span>
							</div>
						</div>
						<div class="image triangle">
							<img ng-src="{{tomedia(item.image) ||'../core/resource/images/nopic.jpg'}}"/>
						</div>
					</a>
				</div>
				<div class="fui-goods-group block" ng-if="pagedata.action == 'cms360'">
						<div class="fui-tab-scroll" style="height: 4.2rem" ng-if="pagedata.groups">
							<div class="xcontainer weui_cells_radio3" style="z-index:0;height: 4.2rem;padding:0.3rem" >
								<label class="jyui_cell_member" style="width:50px" ng-repeat="item in pagedata.groups">
									<div class="userimg" href="javascript:;" ng-click="access_json('jy_cmsphoto/photo//groupid='+item.id)">
										<img class="img-circle"  ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}" width="50" height="50">
									</div>
									<div>
										<span style="font-size:0.3rem">{{item.title}}</span>
									</div>
								</label>
							</div>
						</div>
					   <div class="fui-picturew" id="mpmansory" style="padding: {paddingtop}px {paddingleft}px; background: {background};">
								<a ng-repeat="item in pagedata.list" class="item"  style="padding: 5px;" href="{{item.url}}" ng-show="item.ishome" >
									<div class="image" data-text='{{item.ishot}}'>
										<img ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}">
										<div class="title" style="color: {titlecolor}; text-align: {titlealign};">{{item.title}}</div>
										<div class="pics">{{item.readnum || 0}}n</div>
									</div>
								</a>
						</div>
				</div>
				<div class="fui-goods-group block" ng-if="pagedata.action == 'photo'">
						<div class="fui-tab-scroll" style="height: 4.2rem" ng-if="pagedata.groups">
							<div class="xcontainer weui_cells_radio3" style="z-index:0;height: 4.2rem;padding:0.3rem" >
								<label class="jyui_cell_member" style="width:50px" ng-repeat="item in pagedata.groups">
									<div class="userimg" href="javascript:;" ng-click="access_json('jy_cmsphoto/photo//groupid='+item.id)">
										<img class="img-circle"  ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}" width="50" height="50">
									</div>
									<div>
										<span style="font-size:0.3rem">{{item.title}}</span>
									</div>
								</label>
							</div>
						</div>
					   <div class="fui-picturew" id="mpmansory" style="padding: {paddingtop}px {paddingleft}px; background: {background};">
								<a ng-repeat="item in pagedata.list" class="item"  style="padding: 5px;" href="{{item.url}}" >
									<div class="image" data-text='{{item.ishot}}'>
										<img ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}">
										<div class="title" style="color: {titlecolor}; text-align: {titlealign};">{{item.title}}</div>
										<div class="pics">{{item.picsnum || 0}}P</div>
									</div>
								</a>
						</div>
				</div>
				<div class="fui-goods-group block" ng-if="pagedata.action == 'video'">
						<div class="fui-tab-scroll" style="height: 4.2rem" ng-if="pagedata.groups">
							<div class="xcontainer weui_cells_radio3" style="z-index:0;height: 4.2rem;padding:0.3rem" >
								<label class="jyui_cell_member" style="width:50px" ng-repeat="item in pagedata.groups">
									<div class="userimg" href="javascript:" ng-click="access_json('jy_cmsarticle/video/list/groupid='+item.id)">
										<img class="img-circle"  ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}" width="50" height="50">
									</div>
									<div>
										<span style="font-size:0.3rem">{{item.title}}</span>
									</div>
								</label>
							</div>
						</div>
					   <div class="fui-picturew" style="padding: {paddingtop}px {paddingleft}px; background: {background};">
							<div ng-repeat="item in pagedata.list" class="item">
								<div class="image">
								<video src="{{tomedia(item.video)}}"  height="100%" width="100%" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" preload="auto">
								</video>
								<div class="title" style="color: {titlecolor}; text-align: {titlealign};">{{item.title}}</div>
								<div class="pics">{{item.readnum || 0}}</div>
								</div>
								</div>
						</div>
				</div>
				<div class="fui-goods-group block" ng-if="pagedata.action == 'live'">
						<div class="fui-cell-group fui-comment-group">
							<div class="fui-cell fui-cell-click">
								<div class="fui-cell-text desc">热门分类</div>
								<div class="fui-cell-text desc label" ng-click="" style="text-align: right;">
									全部
								</div>
								<div class="fui-cell-remark"></div>
							</div>
							<div class="fui-list live-category-list">
								<div class="fui-list-inner">
									<div class="live-category-list-inner">
										<a ng-repeat="item in pagedata.groups" href="javascript:;" ng-click="access_json('jy_cmslive/list//groupid='+item.id)" class="external">
											<p style="width:4.5rem;"><img ng-src="{{tomedia(item.image) || '../core/resource/images/banner-1.jpg'}}"></p>
											<span>{{item.title}}</span>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="live-hot-list">
							<div class="container">
								<div class="live-hot-list-room" ng-repeat="item in pagedata.list">
									<div class="live-hot-list-inner">
										<a href="javascript:void(0);" ng-click="access_json('jy_cmslive/room/main/id='+item.id)"  data-nocache="true" class="live-hot-list-img">
											<span ng-if="item.living == 1" class="live-living">
												<i></i>直播中
											</span>
											<img ng-src="{{tomedia(item.image) || '../core/resource/images/banner-1.jpg'}}" alt="{{item.title}}"/>
										</a>
										<a href="javascript:void(0);" ng-click="access_json('jy_cmslive/room/main/id='+item.id)" data-nocache="true">
												<h3>{{item.title}}</h3>
										</a>
										<p>{{item.time}} 开播</p>
										<div class="live-list-subscribe" style="padding:0 0.3rem;">
										   <span>订阅人数 {{item.readnum}}</span>
												<span ng-if="item.living == 0">
													<a ng-show="item.subscribe >0" href="javascript:void(0);" class="live-subscribe-a live-subscribe-default-a disabled" data-subscribe="{$row['subscribe']}">取消订阅</a>
													<a ng-show="item.subscribe <1" href="javascript:void(0);" class="live-subscribe-a live-subscribe-default-a" data-subscribe="{$row['subscribe']}">点击订阅</a>
												</span>
												<span ng-if="item.living ==1">
													<a href="javascript:void(0);" ng-click="access_json('jy_cmslive/room/main/id='+item.id)" class="live-subscribe-a live-subscribe-full-a">观看直播</a>
												</span>

										</div>
									</div>
								</div>
							</div>
							<div style="clear:both;"></div>
						</div>
				</div>
				<div ng-show="loading" class='infinite-loading'><span class='fui-preloader'></span><span style="margin-left:1.5rem"> 正在加载...</span></div>
			</div>
	</div>
</div>
<div ng-include="sys_html('_footer')"></div>
<script type="text/javascript">
scope.pagedata.action = 'default';
//滚动加载
scope.scroll(function(){
	scope.loading = true;  //状态标记
	scope.$apply();
	setTimeout('getlist(scope.pagedata.action)',2000);
},false,'svposttext');
getlist('default');
var defaultpage = 1
var photopage = 1
var cms360page = 1
var videopage = 1
var livepage = 1
function getlist(pluginname){
		if(pluginname == 'cms360'){
			var plugin = 'jy_cms360';
			var action = 'index';
			var op = 'list';
			var data = {'page':cms360page};
			var page= cms360page++;
		}
		if(pluginname == 'photo'){
			var plugin = 'jy_cmsphoto';
			var action = 'index';
			var op = 'getlist';
			var data = {'page':photopage};
			var page= photopage++;
		}
		if(pluginname == 'default'){
			var plugin = 'jy_cmsarticle';
			var action = 'news';
			var op = 'getlist';
			var data = {'page':defaultpage};
			var page= defaultpage++;
		}
		if(pluginname == 'video'){
			var plugin = 'jy_cmsarticle';
			var action = 'video';
			var op = 'list';
			var data = {'page':videopage};
			var page= videopage++;
		}
		if(pluginname == 'live'){
			var plugin = 'jy_cmslive';
			var action = 'index';
			var op = 'list';
			var data = {'page':livepage};
			var page= livepage++;
		}
		var params = {
					'plugin':plugin,
					'action':action,
					'op':op,
					'data':data,
					'callback':function(data){
					console.log(data);
							if(data.error !=1){
							 for (var i=0;i<data.list.length;i++){
									scope.pagedata.list.push(data.list[i]);
								}
								if(page >1){
									$("#listitem").animate({scrollTop:0},300);
								}
								scope.loading = false;
								window.scope.pagedata.list=data.list;
								window.scope.pagedata.groups=data.groups;
								scope.$apply();
								getmpmansory();
							}else{
								onsole.log('error');
							};
					}
		}
		scope.post_json(params);
}
scope.getlist = function(pluginname){
		defaultpage = 1
		photopage = 1
		cms360page = 1
		videopage = 1
		livepage = 1
		getlist(pluginname);
}
function getmpmansory(){
	require(['mpmansory'], function(){
		$('#mpmansory').mpmansory({
			childrenClass: 'item',
			columnClasses: 'pic-water',
			breakpoints:{
						lg: 3, 
						md: 4, 
						sm: 6,
						xs: 6,
			},
			distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, 
			onload: function (items) {
				//make somthing with items
			}
		});
	});
}
</script>